<template>
  <div class="homeMain">
    <el-row :gutter="16" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <el-card class="box-card" style="overflow: hidden">
          <div slot="header" class="clearfix;">
            <span class="moduleTit">快捷入口</span>
            <el-button size="small" type="text" icon="el-icon-setting" style="float: right" @click="handleSet">菜单设置</el-button>
          </div>
          <div class="homeCon">
            <el-row :gutter="20">
              <el-col v-for="(item,index) in entryencelist" :key="index" :span="6" style="margin-bottom: 20px" class="tx-c">
                <div class="menuIcon" :class="'icon' + (index + 1)" @click="$router.push(item.path)" />
                <div class="menuTxt" @click="$router.push(item.path)">{{ item.menuName }}</div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col" style="padding-left: 0">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="moduleTit">企业增值税</span>
            <!-- <div class="year-select">
              <el-button type="primary" size="mini" circle icon="el-icon-arrow-left" />
              <span style="padding: 0 10px">2021</span>
              <el-button type="primary" size="mini" circle icon="el-icon-arrow-right" />
            </div>-->
            <el-date-picker v-model="date2" :editable="false" type="year" placeholder="选择年份" size="mini" :clearable="false" value-format="yyyy" style="width: 80px" />
          </div>
          <div class="homeCon">
            <img src="../../assets/bar.jpg" style="display:block;width:100%;" />
            <!-- <barChart :chart-data="chartData" :x-data="xData" /> -->
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="spanTit" :style="{ color: curTab === 0 ? '#178df3' : '#333' }" @click="curTab = 0">财务状况</span>
            <span>|</span>
            <span class="spanTit" :style="{ color: curTab === 1 ? '#178df3' : '#333' }" @click="curTab = 1">财务指标</span>
            <el-date-picker v-model="date3" :editable="false" type="month" placeholder="选择日期" size="mini" :clearable="false" value-format="yyyy-MM" style="width: 100px" />
          </div>
          <div v-show="curTab === 0" class="homeCon">
            <div class="accountDiv bbc">
              <div class="itemIcon ico1" />
              <p style="font-size: 14px">盈利状况</p>
              <p style="font-size: 13px">
                营业收入：2000.00
                <span style="margin-left: 140px">净利润：3000.00</span>
              </p>
            </div>
            <div class="accountDiv bbc">
              <div class="itemIcon ico2" />
              <p style="font-size: 14px">应收应付</p>
              <p style="font-size: 13px">
                应收账款：2000.00
                <span style="margin-left: 140px">应付账款：3000.00</span>
              </p>
            </div>
            <div class="accountDiv bbc">
              <div class="itemIcon ico3" />
              <p style="font-size: 14px">货币基金</p>
              <p style="font-size: 13px">
                净发生额：2000.00
                <span style="margin-left: 140px">余额：3000.00</span>
              </p>
            </div>
            <div class="accountDiv">
              <div class="itemIcon ico4" />
              <p style="font-size: 14px">应交税金</p>
              <p style="font-size: 13px">
                城建税：2000.00
                <span style="margin-left: 50px">教育附加：3000.00</span>
              </p>
              <p style="font-size: 13px">
                地方教育附加：2000.00
                <span style="margin-left: 50px">企业所得税：3000.00</span>
              </p>
              <p style="font-size: 13px">企业所得税累计税负：2000.00</p>
            </div>
          </div>
          <div v-show="curTab === 1" class="homeCon">
            <div class="accountDiv bbc">
              <div class="itemIcon ico5" />
              <p style="font-size: 14px">盈利能力</p>
              <p style="font-size: 13px">
                净利率：0.00
                <span style="margin-left: 100px">毛利率：0.00</span>
              </p>
            </div>
            <div class="accountDiv bbc">
              <div class="itemIcon ico6" />
              <p style="font-size: 14px">偿债能力</p>
              <p style="font-size: 13px">
                资产负债率：0.00
                <span style="margin-left: 80px">流动比率：0.00</span>
              </p>
            </div>
            <div class="accountDiv bbc">
              <div class="itemIcon ico7" />
              <p style="font-size: 14px">运营能力</p>
              <p style="font-size: 13px">
                应收账款周转率：689.66
                <span style="margin-left: 60px">资产周转率：0.19</span>
              </p>
            </div>
            <div class="accountDiv">
              <div class="itemIcon ico8" />
              <p style="font-size: 14px">发展能力指标</p>
              <p style="font-size: 13px">
                收入增长率：0.00
                <span style="margin-left: 50px">净利润增长率：0.19</span>
              </p>
              <p style="font-size: 13px">净资产收益率：0.00</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col" style="padding-left: 0">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="moduleTit">预警 & 待办</span>
          </div>
          <div class="homeCon" style="padding: 0 10px">
            <div class="subtit">
              预警设置
              <el-button type="primary" circle size="mini" icon="el-icon-plus" class="setIcon" @click="handleAdd1()" />
            </div>
            <div class="clearfix">
              <p class="w50">预警项：符合小型微利企业年度应纳税所得额预警(季度)</p>
              <p class="w50">预警项：小规模转一般人收入预警(连续12月)</p>
              <p class="w50">
                <span class="circle" /> 连续12月发生：¥12,000.00
              </p>
              <p class="w50">
                <span class="circle" /> 预警上限：¥5,000,000.00
              </p>
              <p class="w50">
                <span class="circle" /> 还可新增：¥4,988,000.00
              </p>
              <p class="w50">
                <span class="circle" /> 季度发生：¥0.00
              </p>
              <p class="w50">
                <span class="circle" /> 本月预警：¥1800.00
              </p>
            </div>
            <div class="subtit" style="margin-top: 20px">
              待办事项
              <el-button type="primary" circle size="mini" icon="el-icon-plus" class="setIcon" @click="handleAdd2()" />
            </div>
            <div class="clearfix">
              <p class="w50">
                <span class="circle" /> 03月存在6张未记账凭证
              </p>
              <p class="w50">
                <span class="circle" /> 03月税金及附加未计提
              </p>
              <p class="w50">
                <span class="circle" /> 03月成本未结转
              </p>
              <p class="w50">
                <span class="circle" /> 03月所得税未计提
              </p>
              <p class="w50">
                <span class="circle" /> 03月折旧未计提
              </p>
              <p class="w50">
                <span class="circle" /> 03月期间损益未结转
              </p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="菜单设置" :visible.sync="dialogVisible1" width="840px">
      <el-form ref="form1" :model="form1">
        <div v-for="route in routes" :key="route.path" style="margin-bottom: 10px">
          <template v-if="route.meta">
            <label style="width:56px;text-align:right;display:inline-block;font-size:14px;margin-right:10px">{{ route.meta && route.meta.title }}</label>
            <el-tag v-for="child in route.children" :key="child.path" :effect="haveTitle(child.meta.title)" :type="haveTit(child.meta.title)" style="margin-right:10px" @click="tagClick(child.path, child.meta.title, child.seq)">{{ child.meta.title }}</el-tag>
          </template>
        </div>
        <p>注：①只能设置8个菜单 ②同一用户，相同会计制度的公司只需设置一次。</p>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="saveForm1">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加预警" :visible.sync="dialogVisible2" width="400px">
      <el-form ref="form2" :model="form2" :rules="rules2" label-position="right" label-width="112px">
        <el-form-item label="预警项目名称" prop="name">
          <el-input v-model="form2.name" placeholder="预警项目名称" />
        </el-form-item>
        <el-form-item label="科目及编码" prop="name">
          <el-input v-model="form2.name" placeholder="科目及编码" />
        </el-form-item>
        <el-form-item label="预警上限" prop="name">
          <el-input v-model="form2.name" placeholder="预警上限" />
        </el-form-item>
        <el-form-item label="预警提醒" prop="name">
          <el-input v-model="form2.name" placeholder="预警提醒" />
        </el-form-item>
        <el-form-item label="预警周期" prop="name">
          <el-input v-model="form2.name" placeholder="预警周期" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="saveForm2">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加待办" :visible.sync="dialogVisible3" width="400px">
      <el-form ref="form3" :model="form3" :rules="rules3" label-position="right" label-width="84px">
        <el-form-item label="截止时间" prop="name">
          <el-input v-model="form3.text" placeholder="截止时间" />
        </el-form-item>
        <el-form-item label="关注人" prop="name">
          <el-input v-model="form3.name" placeholder="关注人" />
        </el-form-item>
        <el-form-item label="内容" prop="name">
          <el-input v-model="form3.name" placeholder="内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogVisible3 = false">取消</el-button>
        <el-button type="primary" @click="saveForm3">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getNowDate, deepClone } from '@/utils/index'
// import barChart from './components/BarChart'
import { getHomeMenu, updateUserIdByMenuIdList } from '@/api/user'
import path from 'path'
export default {
  name: 'Home',
  // components: { barChart },
  filters: {
    toFix(val) {
      if (!val) {
        return '0.00'
      }
      return parseFloat(val).toFix(2)
    }
  },
  data() {
    return {
      curTab: 0,
      date1: getNowDate(),
      date2: getNowDate(),
      date3: getNowDate(),
      date4: getNowDate(),
      chartData: {
        month: [100, 200, 300, 250, 400, 350, 330, 100, 200, 300, 250, 400],
        total: [120, 230, 260, 250, 280, 150, 230, 200, 300, 250, 400, 350]
      },
      xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      entryencelist: [],
      entryencelist_copy: [],
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      form1: {},
      routes: [],
      form2: {},
      rules2: {
        name: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      },
      form3: {},
      rules3: {
        name: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes'
    ])
  },
  created() {
    getHomeMenu().then(res => {
      const menulist = res.data.data || '[]'
      this.entryencelist = JSON.parse(menulist)
    })
  },
  methods: {
    calcPath(basePath, path) {
      return path.resolve(basePath, path)
    },
    haveTitle(title) {
      const isHave = this.entryencelist_copy.find(it => it.menuName === title)
      return isHave ? 'dark' : 'plain'
    },
    haveTit(title) {
      const isHave = this.entryencelist_copy.find(it => it.menuName === title)
      const len8 = this.entryencelist_copy.length === 8
      return !isHave && len8 ? 'info' : ''
    },
    handleSet() {
      const routes = this.permission_routes.filter(it => it.meta && it.meta.title && it.meta.title !== '设置')
      routes.forEach((it, ii) => {
        it.children = it.children.filter(it => it.hidden !== true)
        it.children.forEach((ele, index) => {
          ele.seq = ii * 10 + index
          ele.path = path.resolve(it.path, ele.path)
        })
      })
      this.routes = routes
      this.dialogVisible1 = true
      this.entryencelist_copy = deepClone(this.entryencelist)
    },
    tagClick(path, title, seq) {
      const isHave = this.entryencelist_copy.findIndex(it => it.menuName === title)
      if (isHave >= 0) {
        this.entryencelist_copy.splice(isHave, 1)
      } else if (this.entryencelist_copy.length < 8) {
        const route = { path, menuName: title, seq }
        this.entryencelist_copy.push(route)
      }
    },
    handleAdd1() {
      this.dialogVisible2 = true
    },
    handleAdd2() {
      this.dialogVisible3 = true
    },
    saveForm1() {
      const entryencelist = this.entryencelist_copy.sort((x, y) => x.seq > y.seq ? 1 : -1)
      this.entryencelist = entryencelist
      this.dialogVisible1 = false
      const obj = this.entryencelist
      updateUserIdByMenuIdList(obj).then(res => {
        this.$message.success(res.data.msg)
      })
    },
    saveForm2() {
      this.dialogVisible2 = false
    },
    saveForm3() {
      this.dialogVisible3 = false
    }
  }
}
</script>
<style lang="scss" scoped>
p {
  margin: 10px 0;
}
.homeMain {
  padding: 10px;
  min-width: 1220px;
  background-color: rgb(240, 242, 245);
  position: relative;
  height: 100%;
}
.moduleTit {
  display: inline-block;
  line-height: 28px;
}
.menuIcon {
  width: 45px;
  height: 45px;
  display: inline-block;
  cursor: pointer;
}
.menuTxt {
  font-size: 13px;
  color: #666;
  margin-top: 12px;
  cursor: pointer;
}
.icon1 {
  background: url(../../assets/home/1.png) no-repeat center center;
  background-size: 100% 100%;
}
.icon2 {
  background: url(../../assets/home/2.png) no-repeat center center;
  background-size: 100% 100%;
}
.icon3 {
  background: url(../../assets/home/3.png) no-repeat center center;
  background-size: 100% 100%;
}
.icon4 {
  background: url(../../assets/home/4.png) no-repeat center center;
  background-size: 100% 100%;
}
.icon5 {
  background: url(../../assets/home/5.png) no-repeat center center;
  background-size: 100% 100%;
}
.icon6 {
  background: url(../../assets/home/6.png) no-repeat center center;
  background-size: 100% 100%;
}
.icon7 {
  background: url(../../assets/home/7.png) no-repeat center center;
  background-size: 100% 100%;
}
.icon8 {
  background: url(../../assets/home/8.png) no-repeat center center;
  background-size: 100% 100%;
}
.panel-group {
  .card-panel-col {
    margin-bottom: 10px;
  }
}
.subtit {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 24px;
}
.setIcon {
  margin-left: 15px;
  font-size: 18px;
  vertical-align: top;
}
.w50 {
  float: left;
  width: 50%;
  font-size: 13px;
}
.circle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #178df3;
  display: inline-block;
  vertical-align: middle;
}
.spanTit {
  display: inline-block;
  line-height: 28px;
  cursor: pointer;
  font-weight: bold;
}
.itemIcon {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -30px;
}
.ico1 {
  background: url(../../assets/home/11.png) no-repeat center center;
  background-size: 100% 100%;
}
.ico2 {
  background: url(../../assets/home/12.png) no-repeat center center;
  background-size: 100% 100%;
}
.ico3 {
  background: url(../../assets/home/13.png) no-repeat center center;
  background-size: 100% 100%;
}
.ico4 {
  background: url(../../assets/home/14.png) no-repeat center center;
  background-size: 100% 100%;
}
.ico5 {
  background: url(../../assets/home/15.png) no-repeat center center;
  background-size: 100% 100%;
}
.ico6 {
  background: url(../../assets/home/16.png) no-repeat center center;
  background-size: 100% 100%;
}
.ico7 {
  background: url(../../assets/home/17.png) no-repeat center center;
  background-size: 100% 100%;
}
.ico8 {
  background: url(../../assets/home/18.png) no-repeat center center;
  background-size: 100% 100%;
}
.accountDiv {
  position: relative;
  padding: 0px 120px;
}
.bbc {
  border-bottom: 1px #eee solid;
}
.homeCon {
  min-height: calc(50vh - 158px);
}
/deep/.el-table__empty-text {
  padding: 55px;
}
/deep/.el-card__header {
  padding: 10px 15px;
}
/deep/.el-date-editor {
  width: 120px;
  float: right;
}

/deep/.year-select {
  width: 150px;
  float: right;
}

/deep/.el-tag {
  cursor: pointer;
}
/deep/.el-button--mini.is-circle{
  padding: 2px;
}
</style>
